<template>
    <div class="app-container">
      <h1 class="center-title">数据库备份</h1>
      <el-button type="primary" @click="performCopy" style="margin-bottom: 20px;">备份</el-button>
  
      <el-table :data="listData" border stripe style="width: 100%">
        <el-table-column prop="fileName" label="fileName(备份时间戳)"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="useFile(scope.row.fileName)">还原</el-button>
            <el-button type="delete" size="small" @click="dFile(scope.row.fileName)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import { getList, copy, use, deleteFile } from '@/api/database/database';
  
  export default {
    data() {
      return {
        listData: []
      };
    },
    created() {
      this.fetchList();
    },
    methods: {
      async fetchList() {
        try {
          const response = await getList();
          console.log(response);
          // 将返回的 List<String> 转换为数组对象
          this.listData = response.data.map(fileName => ({ fileName }));
          console.log(this.listData);
        } catch (error) {
          console.error('Error fetching list:', error);
          this.$message.error('获取列表失败');
        }
      },
      async performCopy() {
        try {
          const response = await copy();
          if (response.code === 200) {
            this.$message.success('备份成功');
            this.fetchList();
          } else {
            this.$message.error('备份失败');
          }
        } catch (error) {
          console.error('Error copying:', error);
          this.$message.error('备份失败');
        }
      },
      async useFile(fileName) {
        try {
          const response = await use(fileName);
          if (response.code === 200) {
            this.$message.success('还原成功');
          } else {
            this.$message.error('还原失败');
          }
        } catch (error) {
          console.error('Error using file:', error);
          this.$message.error('还原失败');
        }
      },
      async dFile(fileName) {
        try {
          const response = await deleteFile(fileName);
          if (response.code === 200) {
            this.$message.success('删除成功');
          } else {
            this.$message.error('删除失败');
          }
        } catch (error) {
          console.error('Error using file:', error);
          this.$message.error('删除失败');
        }
        this.fetchList();
      }
    }
  };
  </script>
  
  <style scoped>
  /* 可以在这里添加一些样式 */
  .app-container {
    padding: 20px;
  }
  
  .center-title {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .el-form-item__label {
    text-align: right;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .el-col {
    padding-right: 10px;
    padding-left: 10px;
  }
  
  .uniform-input {
    width: 100%;
  }
  
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  
  .blue-link {
    color: #409EFF;
    cursor: pointer;
    text-decoration: underline;
  }
  
  .delete-link {
    margin-left: 10px;
  }
  </style>
  
  
  
  